<!-- src/views/RentalStep1.vue -->
<template>
  <div class="rental-form">
    <!-- 顶部导航 -->
    <div class="nav-header">
      <div class="back">
        <i class="el-icon-arrow-left" @click="goBack"></i>
        <span>我要求租</span>
      </div>
      <div class="icons">
        <el-button type="text" icon="el-icon-more"></el-button>
        <el-button type="text" icon="el-icon-s-help"></el-button>
      </div>
    </div>

    <!-- 进度指示器 -->
    <div class="step-indicator">
      <div class="step active">1</div>
      <div class="line"></div>
      <div class="step">2</div>
    </div>

    <!-- 表单内容 -->
    <div class="form-content">
      <!-- 位置选择 -->
      <div class="form-item">
        <div class="form-title">你好，我想租个房子，希望在这个位置附近</div>
        <el-select v-model="formData.line" placeholder="地铁线路">
          <el-option label="1号线" value="1"></el-option>
          <el-option label="2号线" value="2"></el-option>
        </el-select>
        <el-select v-model="formData.station" placeholder="郑州火车站">
          <el-option label="郑州火车站" value="station1"></el-option>
          <el-option label="郑州东站" value="station2"></el-option>
        </el-select>
      </div>

      <!-- 房型选择 -->
      <div class="form-item">
        <div class="form-title">希望租到的房子是这样的</div>
        <div class="select-group">
          <el-select v-model="formData.roomType" placeholder="一居室">
            <el-option label="一居室" value="1"></el-option>
            <el-option label="两居室" value="2"></el-option>
          </el-select>
          <el-select v-model="formData.rentType" placeholder="整租">
            <el-option label="整租" value="whole"></el-option>
            <el-option label="合租" value="share"></el-option>
          </el-select>
          <el-select v-model="formData.balcony" placeholder="带阳台">
            <el-option label="带阳台" value="yes"></el-option>
            <el-option label="无阳台" value="no"></el-option>
          </el-select>
        </div>
      </div>

      <!-- 租金信息 -->
      <div class="form-item">
        <div class="form-title">我的月租预算、租期和租赁方式是这样的</div>
        <div class="rent-group">
          <el-input v-model="formData.rent" placeholder="租金">
            <template slot="append">元/月</template>
          </el-input>
          <el-select v-model="formData.term" placeholder="3个月">
            <el-option label="3个月" value="3"></el-option>
            <el-option label="6个月" value="6"></el-option>
          </el-select>
          <el-select v-model="formData.payType" placeholder="押一付一">
            <el-option label="押一付一" value="1-1"></el-option>
            <el-option label="押一付三" value="1-3"></el-option>
          </el-select>
        </div>
      </div>

      <!-- 环境要求 -->
      <div class="form-item">
        <div class="form-title">对于房间环境，我希望是这样的</div>
        <el-input
            type="textarea"
            v-model="formData.environment"
            placeholder="比如需要有大阳台，房间采光要好"
            :rows="3"
        ></el-input>
      </div>

      <!-- 个人介绍 -->
      <div class="form-item">
        <div class="form-title">简单介绍下我的情况，请多指教</div>
        <el-input
            type="textarea"
            v-model="formData.introduction"
            placeholder="比如上班族，性别，年龄..."
            :rows="3"
        ></el-input>
      </div>

      <el-button type="primary" class="next-btn" @click="handleNext">下一步</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RentalStep1',
  data() {
    return {
      formData: {
        location: '',        // 由地铁线路和站点组合而成
        structure: '',       // 房屋户型（由roomType和balcony组合）
        rent: '',           // 租金
        tenancyTerm: '',    // 租期
        payType: '',        // 支付方式
        renterRequire: '',  // 租客要求（原environment字段）
        landlord: '',       // 个人情况说明（原introduction字段）
        
        // 用于UI显示的临时字段
        line: '',           // 地铁线路
        station: '',        // 地铁站
        roomType: '',       // 房间类型
        rentType: '',       // 整租/合租
        balcony: '',        // 是否带阳台
      }
    }
  },
  created() {
    // 数据回显逻辑
    if (this.$store && this.$store.state.formData) {
      const savedData = this.$store.state.formData.step1
      if (savedData) {
        // 使用保存的原始选择数据进行回显
        this.formData = {
          line: savedData.line,
          station: savedData.station,
          roomType: savedData.roomType,
          rentType: savedData.rentType,
          balcony: savedData.balcony,
          rent: savedData.rent,
          term: savedData.tenancyTerm?.replace('个月', ''),
          payType: savedData.payType,
          environment: savedData.renterRequire,
          introduction: savedData.landlord
        }
      }
    }
  },
  methods: {
    goBack(){
      this.$router.push('/release')
    },
    handleNext() {
      try {
        // 在保存到 Vuex 之前，处理数据格式
        const processedData = {
          // 组合地址信息
          location: `地铁${this.formData.line}号线 ${this.formData.station}`,
          
          // 组合房屋结构信息
          structure: `${this.formData.roomType}室 ${this.formData.rentType} ${this.formData.balcony === 'yes' ? '带阳台' : '无阳台'}`,
          
          // 其他字段直接映射
          rent: this.formData.rent,
          tenancyTerm: `${this.formData.term}个月`,
          payType: this.formData.payType,
          renterRequire: this.formData.environment,
          landlord: this.formData.introduction,
          
          // 保留原始选择数据，用于数据回显
          line: this.formData.line,
          station: this.formData.station,
          roomType: this.formData.roomType,
          rentType: this.formData.rentType,
          balcony: this.formData.balcony,
        }

        // 保存数据到 Vuex
        if (this.$store) {
          this.$store.commit('SET_STEP1_DATA', processedData)
        }
        
        // 跳转到第二步
        this.$router.push('/rental-step2')
      } catch (error) {
        console.error('Error in handleNext:', error)
        this.$message.error('保存数据失败，请重试')
      }
    },

    // 数据验证方法
    validateForm() {
      if (!this.formData.line || !this.formData.station) {
        this.$message.warning('请选择期望的位置')
        return false
      }
      if (!this.formData.roomType || !this.formData.rentType) {
        this.$message.warning('请选择房屋类型')
        return false
      }
      if (!this.formData.rent) {
        this.$message.warning('请输入租金预算')
        return false
      }
      if (!this.formData.term || !this.formData.payType) {
        this.$message.warning('请选择租期和支付方式')
        return false
      }
      return true
    }
  }
}
</script>

<style scoped>
.icons {
  display: flex;
  border: 1px solid white;
  padding: 5px 5px;
  border-radius: 15px;
}

.icons button {
  color: white;
  padding: 0 5px;
  font-size: 18px;
}

.rental-form {
  max-width: 414px;
  margin: 0 auto;
  background: #f5f5f5;
}

.nav-header {
  background: #ff7f50;
  color: white;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.step {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ddd;
}

.step.active {
  background: #409EFF;
  color: white;
}

.line {
  width: 100px;
  height: 1px;
  background: #ddd;
  margin: 0 10px;
}

.form-content {
  padding: 15px;
}

.form-item {
  background: white;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
}

.form-title {
  margin-bottom: 10px;
  color: #333;
}

.select-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rent-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.next-btn {
  width: 100%;
  margin-top: 20px;
}

:deep(.el-select) {
  width: 100%;
}
</style>
